<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.keyword" placeholder="关键字" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getTableData"
                     icon="el-icon-search" size="small">执行查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" size="small"
                     v-on:click="addTeacher">讲师新增
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="tableData" highlight-current-row v-loading="listLoading"
              @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="头像">
        <template v-slot="scope">
          <el-image style="width: 40px;height: 40px"
                    :src="scope.row.headImg"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称"/>

      <el-table-column prop="position" label="职位"/>

      <el-table-column prop="tags" label="标签"/>

      <el-table-column prop="intro" label="介绍" width="200">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top">
            <div style="width: 400px;">{{ scope.row.intro }}</div>
            <div slot="reference" class="name-wrapper">
              <el-tag>
                {{ scope.row.intro }}
              </el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="scope">
          <el-button size="small" @click="edit(scope.row)" icon="el-icon-edit" type="primary">编辑</el-button>
          <el-button type="danger" size="small" @click="del(scope.row)" icon="el-icon-remove">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove"
                 :disabled="this.sels.length===0" icon="el-icon-remove" size="small">批量删除</el-button>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[5, 10, 15]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     background
                     :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--添加或修改界面-->
    <el-dialog :title="title" :visible.sync="saveFormVisible"
               :close-on-click-modal="false" @open="handleDialogOpen">
      <el-form :model="saveForm" label-width="80px" ref="saveForm">
        <el-form-item label="教师名称">
          <el-input v-model="saveForm.name" auto-complete="off"/>
        </el-form-item>

        <el-form-item label="简介">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入简介内容"
              v-model="saveForm.intro">
          </el-input>
        </el-form-item>

        <el-form-item label="技术栈">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入你的技术栈内容"
              v-model="saveForm.technology">
          </el-input>
        </el-form-item>

        <el-form-item label="教师职称">
          <el-input v-model="saveForm.position" auto-complete="off"/>
        </el-form-item>

        <el-form-item label="教师头像">
          <el-input v-model="saveForm.headImg" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="教师才艺">
          <el-input v-model="saveForm.tags" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="saveFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit">提交</el-button>
      </div>
    </el-dialog>


  </section>
</template>


<script>
export default {

  data() {
    return {
      filters: {
        keyword: ''
      },
      tableData: [],
      total: 0,//数据的总条数
      currentPage: 1,//当前页,要传递到后台的
      pageSize: 5, //每页显示多少条
      listLoading: false,
      sels: [],


      title: '',
      //5.添加和修改相关数据
      saveFormVisible: false,
      saveForm: {
        id: null,
        name: '',
        intro: '',
        technology: '',
        position: '',
        headImg: '',
        tags: '',
      },
    }

  },
  methods: {
    //性别显示转换
    formatState: function (row) {
      return row.sex === 1 ? '禁用' : '启用';
    },
    //选择第几页时触发
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;//1->2
      this.getTableData();
    },
    //选择每页显示记录条数时触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getTableData()
    },

    //获取用户列表
    getTableData() {
      let para = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,   //当前页需要显示多少条数据
        keyword: this.filters.keyword
      };
      this.listLoading = true; //显示加载圈
      this.$http.post("/course/teacher/pagelist", para).then(result => {
        this.total = result.data.data.total;
        this.tableData = result.data.data.rows;
        this.listLoading = false;  //关闭加载圈
      });
    },


    //批量删除选项改变时触发
    selsChange(val) {
      this.sels = val
    },
    //批量删除相关方法
    batchRemove() {
      let ids = this.sels.map(obj => obj.id)//获取批量删除对象的id，组成数组。
      this.$http.patch("/course/teacher", ids).then(res => {
        if (res.data.success) {
          this.sels = []
          this.$message.success("操作批量删除成功")
          this.getTableData()
        } else {
          this.$message.error(res.data().success)
        }
      }).catch(() => {
        this.$message.error("网络异常，请查看您的网络")
      })
    },
    del(row) {
      this.$http.delete("/course/teacher/" + row.id,).then(res => {
        if (res.data.success) {
          this.$message.success("操作删除成功")
          this.getTableData()
        } else {
          this.$message.error(res.data.message + "删除失败")
        }
      }).catch(() => {
        this.$message.error("网络异常，请查看您的网络")
      })
    },
    edit(row) {
      this.title = "编辑数据"
      this.saveFormVisible = true //打开模态框
      this.saveForm = Object.assign({}, row)
    },
    addTeacher() {
      this.title = "添加数据"
      this.saveFormVisible = true //打开模态框
      this.saveForm = {
        id: null,
        name: '',
        intro: '多年软件开发开作与项目管理经验。',
        technology: '前段技术有 JavaScript,JQuery,EasyUI,BootStrap,VUE,ElementUI',
        position: '架构师',
        headImg: 'https://www.itsource.cn/upload/picasa/20201015/7a63cdf2-ebde-4dea-9b2a-c7c0d7b1afa8.png',
        tags: '接地气儿，java指挥官',
      }
    },
    saveSubmit() {
      this.$http.post("/course/teacher/save",this.saveForm).then(res => {
        if (res.data.success) {
          this.$message.success("操作" + this.title + "成功")
          this.getTableData()
          this.saveFormVisible = false
        } else {
          this.$message.error(res.data.message + ',' + this.title + "未成功")
          this.saveFormVisible = false
        }
      }).catch(() => {
        this.$message.error("网络异常，请查看您的网络")
      })
    },

    //1.表单弹出时：清除校验规则
    handleDialogOpen() {
      if (this.$refs.saveForm) {
        this.$refs.saveForm.clearValidate();
      }
    },

  },
  mounted() {
    this.getTableData();
  }
}

</script>

<style scoped>

</style>